﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>TSP request complex example</title>

    <script type="application/javascript" src="../../node_modules/babel-polyfill/dist/polyfill.js"></script>
    <script type="text/javascript" src="bundle.js"></script>

    <style type="text/css">
        body{background:#EFEFEF;font:normal 14px/16px Helvetica, Arial, sans-serif;}
        .wrapper{
            width:600px;
            margin:50px auto;
            padding:50px;
            border:solid 2px #CCC;
            border-radius:10px;
            -webkit-border-radius:10px;
            box-shadow:0 0 12px 3px #CDCDCD;
            -webkit-box-shadow:0 0 12px 3px #CDCDCD;
            background:#FFF;
        }
        label{
            font:bold 16px/20px Helvetica, Arial, sans-serif;
            margin:0 0 8px;
        }
        textarea{
            width:500px;
            border:solid 1px #999;
            border-radius:5px;
            -webkit-border-radius:5px;
            height:340px;
            font:normal 12px/15px monospace;
            display:block;
            margin:0 0 12px;
            box-shadow:0 0 5px 5px #EFEFEF inset;
            -webkit-box-shadow:0 0 5px 5px #EFEFEF inset;
            padding:20px;
           resize: none;
        }
        a{
            display:inline-block;
            padding:5px 15px;
            background:#ACD0EC;
            border:solid 1px #4C6181;
            color:#000;
            font:normal 14px/16px Helvetica, Arial, sans-serif;
        }
        a:hover{
            background:#DAEBF8;
            cursor:pointer;
        }
        .header-block {
            margin-top:30px;
            font:bold 16px/20px Helvetica, Arial, sans-serif;
        }
        .border-block{
            border:solid 2px #999;
            border-radius:5px;
            -webkit-border-radius:5px;
            margin:10px 0 0;
            padding:20px 30px;
            background:#F0F4FF;
        }
        .border-block h2{
            margin:0 0 16px;
            font:bold 22px/24px Helvetica, Arial, sans-serif;
        }
        .border-block p{
            margin:0 0 12px;
        }
        .border-block p .type{
            font-weight:bold;
            display:inline-block;
            width:176px;
        }
        .border-block .two-col{
            overflow:hidden;
            margin:0 0 16px;
        }
        .border-block .two-col .subject{
            width:180px;
            font-weight:bold;
            margin:0 0 12px;
            float:left;
        }
        .border-block .two-col #tsp-req-attributes{
            margin:0;
            padding:0;
            float:left;
            list-style:none;
        }
        .border-block .two-col #tsp-req-attributes li p{
            margin:0;
        }
        .border-block .two-col #tsp-req-attributes li p span{
            width:40px;
            display:inline-block;
            margin:0 0 5px;
        }
        .border-block .two-col #tsp-req-exten{
            overflow:hidden;
            padding:0 0 0 17px;
            margin:0;
            list-style-type:square;
        }
        table {
            border:solid;
            border-collapse:collapse;
            border-color:black;
        }
       th { 
        text-align:center;
        background: #ccc;
        padding: 5px;
        border: 1px solid black;
       }
       td { 
        padding: 5px;
        border: 1px solid black; 
       }
    </style>
</head>

<body>
    <div class="wrapper">

        <p class="header-block">Create new TSP request</p>
        <div id="output_div" class="border-block">
            <label for="new_signed_data" style="font-weight:bold;float:left;">BASE-64 encoded new TSP request:</label>
            <textarea id="new_signed_data">&lt;  New encoded TSP request will be stored here &gt;</textarea>
            <a onclick="createTSPReq();">Create</a>
        </div>

        <p class="header-block">Parse loaded/created TSP request</p>
        <div id="tsp-req-data-block" class="border-block">
            <p>
                <label for="tsp-req-file">Select TSP request file (binary):</label>
                <input type="file" id="tsp-req-file" title="TSP request" />
            </p>
            <div id="tsp-req-imprint-div" class="two-col">
                <p class="subject">Message imprint:</p>
                <table id="tsp-req-imprint"><tr><th>Algorithm</th><th>Message</th></tr></table>
            </div>
            <p id="tsp-req-pol" style="display:none;"><span class="type">Policy:</span> <span id="tsp-req-policy"></span></p>
            <p id="tsp-req-non" style="display:none;"><span class="type">Nonce:</span> <span id="tsp-req-nonce"></span></p>
            <p id="tsp-req-cert" style="display:none;"><span class="type">Cert. req. exists:</span> <span id="tsp-req-cert-req"></span></p>
            <div id="tsp-req-extn-div" class="two-col" style="display:none;">
                <p class="subject">Extensions:</p>
                <table id="tsp-req-extn-table"><tr><th>OID</th></tr></table>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('tsp-req-file').addEventListener('change', handleFileBrowse, false);
    </script>
</body>
</html>